<template>
    <div class="more-version">
        <a-spin :spinning="spinning" size="large" tip="Loading...">
            <div class="main-box">
                <div class="left-box">
                    <div class="tit">精确找到 “<b>1</b>” 个作品</div>
                    <div class="v-info">
                        <img src="demo.png" alt="">
                        <h4 v-if="resultData[0]&&resultData[0].workTitle">{{resultData[0].workTitle}}</h4>
                        <p v-if="resultData[0]&&resultData[0].creator"><span style="color: #666">责任者：</span>{{resultData[0].creator}}</p>
                        <p v-if="resultData[0]&&resultData[0].language"><span style="color: #666">语言：</span>{{resultData[0].language}}</p>
                        <p v-if="resultData[0]&&resultData[0].notes&&resultData[0].notes.length>0">
                            <span style="color: #666">介绍：</span>
                            <span v-for="(item,index) in resultData[0].notes" :key="index" v-show="item.note" style="color: #4c4c4c">{{item.note}}&nbsp;&nbsp;&nbsp;</span>
                        </p>
                    </div>
                    <div class="tit">出版年</div>
                    <div class="filter-box">
                        <ul>
                            <!-- <li v-for="(item,index) in facetYearList" :key="index" :class="facetYear==item.name?'cur':''" v-show="showAllYear||index<6" @click="filterChange('facetYear',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li> -->
                            <li v-for="(item,index) in facetYearList" :key="index" :class="facetYearFilterList.indexOf(item.name)>-1?'cur':''" v-show="showAllYear||index<6" @click="filterChange('facetYear',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li>
                        </ul>
                        <div class="show-all" v-if="facetYearList.length>=6">
                            <a href="javascript:" @click="showAll('showAllYear')"><a-icon :type="showAllYear?'caret-up':'caret-down'"></a-icon>{{showAllYear?'收起':'全部显示'}}</a>
                        </div>
                    </div>
                    <div class="tit">出版地</div>
                    <div class="filter-box">
                        <ul>
                            <!-- <li v-for="(item,index) in facetPlaceList" :key="index" :class="facetPlace==item.name?'cur':''" v-show="showAllPlace||index<6" @click="filterChange('facetPlace',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li> -->
                            <li v-for="(item,index) in facetPlaceList" :key="index" :class="facetPlaceFilterList.indexOf(item.name)>-1?'cur':''" v-show="showAllPlace||index<6" @click="filterChange('facetPlace',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li>
                        </ul>
                        <div class="show-all" v-if="facetPlaceList.length>=6">
                            <a href="javascript:" @click="showAll('showAllPlace')"><a-icon :type="showAllPlace?'caret-up':'caret-down'"></a-icon>{{showAllPlace?'收起':'全部显示'}}</a>
                        </div>
                    </div>
                    <div class="tit">出版社</div>
                    <div class="filter-box">
                        <ul>
                            <!-- <li v-for="(item,index) in facetPublisherList" :key="index" :class="facetPublisher==item.name?'cur':''" v-show="showAllPublisher||index<6" @click="filterChange('facetPublisher',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li> -->
                            <li v-for="(item,index) in facetPublisherList" :key="index" :class="facetPublisherFilterList.indexOf(item.name)>-1?'cur':''" v-show="showAllPublisher||index<6" @click="filterChange('facetPublisher',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li>
                        </ul>
                        <div class="show-all" v-if="facetPublisherList.length>=6">
                            <a href="javascript:" @click="showAll('showAllPublisher')"><a-icon :type="showAllPublisher?'caret-up':'caret-down'"></a-icon>{{showAllPublisher?'收起':'全部显示'}}</a>
                        </div>
                    </div>

                    <div class="tit">图书分类</div>
                    <div class="filter-box">
                        <ul>
                            <!-- <li v-for="(item,index) in facetClassList" :key="index" :class="facetClass==item.name?'cur':''" v-show="showAllClass||index<6" @click="filterChange('facetClass',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li> -->
                            <li v-for="(item,index) in facetClassList" :key="index" :class="facetClassFilterList.indexOf(item.name)>-1?'cur':''" v-show="showAllClass||index<6" @click="filterChange('facetClass',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li>
                        </ul>
                        <div class="show-all" v-if="facetClassList.length>=6">
                            <a href="javascript:" @click="showAll('showAllClass')"><a-icon :type="showAllClass?'caret-up':'caret-down'"></a-icon>{{showAllClass?'收起':'全部显示'}}</a>
                        </div>
                    </div>

                    <div class="tit">责任者</div>
                    <div class="filter-box">
                        <ul>
                            <!-- <li v-for="(item,index) in facetPersonList" :key="index" :class="facetPerson==item.name?'cur':''" v-show="showAllPerson||index<6" @click="filterChange('facetPerson',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li> -->
                            <li v-for="(item,index) in facetPersonList" :key="index" :class="facetPersonFilterList.indexOf(item.name)>-1?'cur':''" v-show="showAllPerson||index<6" @click="filterChange('facetPerson',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li>
                        </ul>
                        <div class="show-all" v-if="facetPersonList.length>=6">
                            <a href="javascript:" @click="showAll('showAllPerson')"><a-icon :type="showAllPerson?'caret-up':'caret-down'"></a-icon>{{showAllPerson?'收起':'全部显示'}}</a>
                        </div>
                    </div>
                    <div class="tit">主题词</div>
                    <div class="filter-box">
                        <ul>
                            <!-- <li v-for="(item,index) in facetKeywordList" :key="index" :class="facetKeyword==item.name?'cur':''" v-show="showAllKeyword||index<6" @click="filterChange('facetKeyword',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li> -->
                            <li v-for="(item,index) in facetKeywordList" :key="index" :class="facetKeywordFilterList.indexOf(item.name)>-1?'cur':''" v-show="showAllKeyword||index<6" @click="filterChange('facetKeyword',item.name,index)">{{item.name}}<span>( {{item.count}} )</span></li>
                        </ul>
                        <div class="show-all" v-if="facetKeywordList.length>=6">
                            <a href="javascript:" @click="showAll('showAllKeyword')"><a-icon :type="showAllKeyword?'caret-up':'caret-down'"></a-icon>{{showAllKeyword?'收起':'全部显示'}}</a>
                        </div>
                    </div>
                    <div class="tit">是否有全文</div>
                    <div class="filter-box">
                        <ul>
                            <li v-for="(item,index) in facetPdfCountList" :key="index" :class="facetPdfCountFilterList.indexOf(item.name)>-1?'cur':''" @click="filterChange('facetPdfCount',item.name,index)">{{item.name == "1" ? "内网有":item.name == "0" ? "外网有":"无"}}<span>( {{item.count}} )</span></li>
                        </ul>
                    </div>
                </div>
                <div class="right-content">
                    <div class="filters">
                        <a href="javascript:" v-for="(item,index) in filters" :key="index+Math.random()">{{item.title}}：{{item.value}} <a-icon type="close" @click="deleteFilter(index,item.type,item.value)" /></a>
                    </div>
                    <div class="version-box">
                        <div class="r-info">相关书目共匹配到 “<b>{{rowCount}}</b>” 条书目</div>
                        <ul class="v-list" v-if="resultData&&resultData.length>0">
                            <li v-for="(item,index) in resultData" :key="index">
                                <router-link :to="{name: 'instanceDetail', query: {uri: item.uri}}" target="_blank">
                                    <div class="d-tit">{{item.title}}<span>[{{index+1}}]</span></div>
                                </router-link>
                                <div class="f-box">
                                    <router-link :to="{name: 'instanceDetail', query: {uri: item.uri}}" target="_blank">
                                        <img :src="imagePath(item.shelfs)" alt="">
                                    </router-link>
                                    <div class="info">
                                        <p v-if="item.personInfoList&&item.personInfoList.length>0">
                                            <span>责任者：</span>
                                            <span v-for="(sub_item, sub_index) in item.personInfoList" :key="sub_index+1" v-show="sub_item.personUri">
                                                <span v-if="sub_item.personUri.indexOf('/mgts/')>-1" style="color: #4c4c4c">{{sub_item.personName}}</span>
                                                <span v-else @click="toContributionPerson(sub_item.personUri)" style="color: #4c4c4c; border-bottom: 1px solid #000; text-decoration:none" class="hand">{{sub_item.personName}}</span>
                                                <span v-if="sub_item.personRole" style="color: #4c4c4c">({{sub_item.personRole}})&nbsp;&nbsp;&nbsp;</span>
                                                <span v-else style="color: #4c4c4c">&nbsp;&nbsp;&nbsp;</span>
                                            </span>
                                        </p>
                                        <p v-if="item.provisionActivityList&&item.provisionActivityList.length>0">
                                            <span>出版社：</span>
                                            <span v-for="(sub_item, sub_index) in item.provisionActivityList" :key="sub_index+'2'" v-show="sub_item.proOrganization" style="color: #4c4c4c">
                                                {{sub_item.proOrganization}}&nbsp;&nbsp;&nbsp;
                                            </span>
                                        </p>
                                        <p v-if="item.provisionActivityList&&item.provisionActivityList.length>0">
                                            <span>出版年：</span>
                                            <span v-for="(sub_item, sub_index) in item.provisionActivityList" :key="sub_index+'4'" v-show="sub_item.proDate" style="color: #4c4c4c">
                                                {{sub_item.proDate}}&nbsp;&nbsp;&nbsp;
                                            </span>
                                        </p>
                                        <p v-if="item.provisionActivityList&&item.provisionActivityList.length>0">
                                            <span>出版地：</span>
                                            <span v-for="(sub_item, sub_index) in item.provisionActivityList" :key="sub_index+'3'" v-show="sub_item.proPlace" style="color: #4c4c4c">
                                                {{sub_item.proPlace}}&nbsp;&nbsp;&nbsp;
                                            </span>
                                        </p>
                                        <p v-if="item.page"><span>页码：</span>{{item.page}}</p>
                                        <p v-if="item.dimensions"><span>尺寸：</span>{{item.dimensions}}</p>
                                        <p v-if="item.provision"><span>出版信息：</span>{{item.provision}}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <a-pagination show-quick-jumper :current="pageth" :total="rowCount" @change="onChange" />
                    </div>
                </div>
            </div>
        </a-spin>
        <a-modal v-model="visibleUser" :closable="false" :keyboard="false" :maskClosable="false" width="20%" title="消息" @ok="login">
            <template slot="footer"><a-button key="submit" type="primary" @click="ConfirmError">确认</a-button></template>
            <p class="failure">获取用户信息出错，请联系管理员！</p>
        </a-modal>
        <a-modal v-model="visibleLook" :closable="false" :keyboard="false" :maskClosable="false" width="20%" title="消息" @ok="logout">
            <template slot="footer"><a-button key="submit" type="primary" @click="logout">确认</a-button></template>
            <p class="failure">您无权访问此站点！</p>
        </a-modal>
    </div>
</template>

<script>
import axios from "axios";
import { accountAuthtication, work } from "../../api/urls";
export default {
  data() {
    return {
        visibleUser: false,
        visibleLook: false,
        spinning: true,
        uri: this.$route.query.uri,
        showAllYear: false,
        showAllPlace: false,
        showAllPublisher: false,
        showAllClass: false,
        showAllPerson: false,
        showAllKeyword: false,
        facetYearFilterList: [],
        facetPlaceFilterList: [],
        facetPublisherFilterList: [],
        facetClassFilterList: [],
        facetPersonFilterList: [],
        facetKeywordFilterList: [],
        facetPdfCountFilterList: [],
        facetYear: '',
        facetPlace: '',
        facetPublisher: '',
        facetClass: '',
        facetPerson: '',
        facetKeyword: '',
        facetPdfCount: '',
        facetYearList: [],
        facetPlaceList: [],
        facetPublisherList: [],
        facetClassList: [],
        facetPersonList: [],
        facetKeywordList: [],
        facetPdfCountList: [],
        resultData: [],
        pageth: 1,
        rowCount: 0,
        filters: [],
    };
  },

  created() {
    this.checkUser()
    this.getOriginWork()
  },

  mounted() {
      
  },

  computed: {
        imagePath() {
            return function(shelfs) {
                let path = ""
                if(shelfs&&shelfs.length>0) {
                    for (let i = 0; i < shelfs.length; i++) {
                        if(shelfs[i].cover) {
                            path = "//jdts.library.sh.cn/cover/" + shelfs[i].cover
                            break
                        }
                    }
                    if(path) {
                        return path
                    } else {
                        return "demo.png"
                    }
                } else {
                    return "demo.png"
                }
            }
        }
    },

  methods: {
    getOriginWork() {
        this.spinning = true
        this.showAllYear = false
        this.showAllPlace = false
        this.showAllPublisher = false
        this.showAllClass = false
        this.showAllPerson = false
        this.showAllKeyword = false
        this.facetYear = ''
        this.facetPlace = ''
        this.facetPublisher = ''
        this.facetClass = ''
        this.facetPerson = ''
        this.facetKeyword = ''
        this.pageth = 1
        let opts = {
            cdtn: [
                {
                    logic: "and",
                    field: "WORK",
                    value: this.uri||'',
                    type: "1"
                }
            ],
            pager: {
                pageth: 1
            }
        }
        this.getWorkDetail(opts)
    },

    getNormalWork() {
        this.spinning = true
        let opts = {
            cdtn: [
                {
                    logic: "and",
                    field: "WORK",
                    value: this.uri||'',
                    type: "1"
                },
                // 分面出版年
                {
                    logic: this.facetYear=='其他'?'not':'and', 
                    field: "FACET_YEAR", 
                    value: this.facetYear||'', 
                    type: this.facetYear=='其他'?'4':'1'
                },
                // 分面出版地
                {
                    logic: this.facetPlace=='其他'?'not':'and', 
                    field: "FACET_PLACE", 
                    value: this.facetPlace||'', 
                    type: this.facetPlace=='其他'?'4':'1'
                },
                // 分面出版社
                {
                    logic: this.facetPublisher=='其他'?'not':'and',  
                    field: "FACET_PUBLISHER", 
                    value: this.facetPublisher||'', 
                    type: this.facetPublisher=='其他'?'4':'1'
                },
                // 分面图书分类
                {
                    logic: this.facetClass=='其他'?'not':'and',  
                    field: "FACET_CLASSES", 
                    value: this.facetClass||'', 
                    type: this.facetClass=='其他'?'4':'1'
                },
                // 分面责任者
                {
                    logic: this.facetPerson=='其他'?'not':'and',  
                    field: "FACET_PERSON", 
                    value: this.facetPerson||'', 
                    type: this.facetPerson=='其他'?'4':'1'
                },
                // 分面主题词
                {
                    logic: this.facetKeyword=='其他'?'not':'and',  
                    field: "FACET_SUBJECT", 
                    value: this.facetKeyword||'', 
                    type: this.facetKeyword=='其他'?'4':'1'
                },
                // 是否有全文
                {
                    logic: this.facetPdfCount=='其他'?'not':'and',  
                    field: "FACET_ACCESSLEVEL", 
                    value: this.facetPdfCount||'', 
                    type: this.facetPdfCount=='其他'?'4':'1'
                }
            ],
            pager: {
                pageth: this.pageth
            }
        }
        this.getWorkDetail(opts)
    },

    showAll(key){
        this[key]=!this[key]
    },

    filterChange(type,value,index){
        if(type==='facetYear'){
            if(this.facetYearFilterList.indexOf(value)==-1) {
                this.facetYearFilterList.push(value)
                this.facetYear = ""
                this.facetYearFilterList.forEach(element => {
                    this.facetYear += element + ' '
                });
                this.addFilter(type,'出版年',value)
            }
        }
        if(type==='facetPlace'){
            if(this.facetPlaceFilterList.indexOf(value)==-1) {
                this.facetPlaceFilterList.push(value)
                this.facetPlace = ""
                this.facetPlaceFilterList.forEach(element => {
                    this.facetPlace += element + ' '
                });
                this.addFilter(type,'出版地',value)
            }
        }
        if(type==='facetPublisher'){
            if(this.facetPublisherFilterList.indexOf(value)==-1) {
                this.facetPublisherFilterList.push(value)
                this.facetPublisher = ""
                this.facetPublisherFilterList.forEach(element => {
                    this.facetPublisher += element + ' '
                });
                this.addFilter(type,'出版社',value)
            }
        }
        if(type==='facetClass'){
            if(this.facetClassFilterList.indexOf(value)==-1) {
                this.facetClassFilterList.push(value)
                this.facetClass = ""
                this.facetClassFilterList.forEach(element => {
                    this.facetClass += element + ' '
                });
                this.addFilter(type,'图书分类',value)
            }
        }
        if(type==='facetPerson'){
            if(this.facetPersonFilterList.indexOf(value)==-1) {
                this.facetPersonFilterList.push(value)
                this.facetPerson = ""
                this.facetPersonFilterList.forEach(element => {
                    this.facetPerson += element + ' '
                });
                this.addFilter(type,'作者',value)
            }
        }
        if(type==='facetKeyword'){
            if(this.facetKeywordFilterList.indexOf(value)==-1) {
                this.facetKeywordFilterList.push(value)
                this.facetKeyword = ""
                this.facetKeywordFilterList.forEach(element => {
                    this.facetKeyword += element + ' '
                });
                this.addFilter(type,'主题词',value)
            }
        }
        if(type==='facetPdfCount'){
            if(this.facetPdfCountFilterList.indexOf(value)==-1) {
                this.facetPdfCountFilterList.push(value)
                this.facetPdfCount = this.facetPdfCountFilterList.join(" ")
                this.addFilter(type,'是否有全文',value == "1" ? "内网有":value == "0" ? "外网有":"无")
            }
        }
        this.pageth = 1
        this.getNormalWork()
    },

    addFilter(type,title,value){
        this.filters.push({type,title,value})
    },

    deleteFilter(index,type,value){
        // facet
        if(type==='facetYear') {
            this.facetYear = ''
            for (let i = 0; i < this.facetYearFilterList.length; i++) {
                if(this.facetYearFilterList[i]==value) {
                    this.facetYearFilterList.splice(i,1)
                }
            }
            this.facetYearFilterList.forEach(element => {
                this.facetYear += element + ' '
            });
        }
        if(type==='facetPlace') {
            this.facetPlace = ''
            for (let i = 0; i < this.facetPlaceFilterList.length; i++) {
                if(this.facetPlaceFilterList[i]==value) {
                    this.facetPlaceFilterList.splice(i,1)
                }
            }
            this.facetPlaceFilterList.forEach(element => {
                this.facetPlace += element + ' '
            });
        }
        if(type==='facetPublisher') {
            this.facetPublisher = ''
            for (let i = 0; i < this.facetPublisherFilterList.length; i++) {
                if(this.facetPublisherFilterList[i]==value) {
                    this.facetPublisherFilterList.splice(i,1)
                }
            }
            this.facetPublisherFilterList.forEach(element => {
                this.facetPublisher += element + ' '
            });
        }
        if(type==='facetClass') {
            this.facetClass = ''
            for (let i = 0; i < this.facetClassFilterList.length; i++) {
                if(this.facetClassFilterList[i]==value) {
                    this.facetClassFilterList.splice(i,1)
                }
            }
            this.facetClassFilterList.forEach(element => {
                this.facetClass += element + ' '
            });
        }
        if(type==='facetPerson') {
            this.facetPerson = ''
            for (let i = 0; i < this.facetPersonFilterList.length; i++) {
                if(this.facetPersonFilterList[i]==value) {
                    this.facetPersonFilterList.splice(i,1)
                }
            }
            this.facetPersonFilterList.forEach(element => {
                this.facetPerson += element + ' '
            });
        }
        if(type==='facetKeyword') {
            this.facetKeyword = ''
            for (let i = 0; i < this.facetKeywordFilterList.length; i++) {
                if(this.facetKeywordFilterList[i]==value) {
                    this.facetKeywordFilterList.splice(i,1)
                }
            }
            this.facetKeywordFilterList.forEach(element => {
                this.facetKeyword += element + ' '
            });
        }
        if(type==='facetPdfCount') {
            value = value == "内网有" ? "1" : value == "外网有" ? "0" : "其他"; 
            this.facetPdfCountFilterList = this.facetPdfCountFilterList.filter(t => t !== value);
            this.facetPdfCount = this.facetPdfCountFilterList.join(" ");
        }
        this.filters.splice(index,1)
        this.pageth = 1
        this.sortScore = '1'
        this.sortTitle = ''
        this.sortPerson = ''
        this.getNormalWork()
    },

    onChange(pageth) {
        this.pageth = pageth
        this.getNormalWork()
    },

    // 跳转至该责任者的详细信息 (人名规范库页面)
    toContributionPerson(uri){
        window.open(uri, '_blank');
    },

    async getWorkDetail(opts) {
        // await axios.post("api/work", opts).then(response => {
        await axios.post(work, opts).then(response => {
            if (response.data.success) {
                this.resultData = response.data.data.resultList
                this.rowCount = response.data.data.pager.rowCount
                this.facetYearList = response.data.data.facetList[0].year
                this.facetPlaceList = response.data.data.facetList[1].place
                this.facetPublisherList = response.data.data.facetList[2].publisher
                this.facetClassList = response.data.data.facetList[4].classes
                this.facetPersonList = response.data.data.facetList[3].person
                this.facetKeywordList = response.data.data.facetList[5].subject
                this.facetPdfCountList = response.data.data.facetList[6].accessLevel
                this.spinning = false
            } else {
                this.$message.error("System Error")
            }
        });
    },

    async checkUser() {
        this.$parent.$parent.spinner = true
        /* 
        判断是否有传入token
        登录：https://www.cnbksy.com/jdLogin?targetUrl=https://tushu.cnbksy.com?ss
        返回token：https://jdts.library.sh.cn/?ss&token=6fd70427739110ab86b4a2f427423bb2e0c1cc2707665536f676fb4dda7a7ff6af8503d1c564ea39f86392a3848ec58ee7590403f3aee5947c0f9838e5f61396#/
        router(路由配置) 需修改为 mode: 'history' 模式
        通过 this.$route.query.xxx 获取
        */
        if(!sessionStorage.getItem('token')) {
            sessionStorage.setItem('token', this.$route.query.token||'')
        }
        if(sessionStorage.getItem('token')&&!sessionStorage.getItem('orgName')) {
            await axios.post(accountAuthtication, {params: {token: sessionStorage.getItem('token')}}).then(response => {
                if (response.data.result==0) {
                    this.$parent.$parent.$refs.header.orgName = response.data.data.username
                    sessionStorage.setItem('orgName', response.data.data.username)

                    this.$router.push({name: 'moreVersion', query: {uri: this.uri}})                
                } else {
                    this.visibleUser = true
                }
            });
        }
        if(sessionStorage.getItem('token')&&sessionStorage.getItem('orgName')) {
            this.$router.push({name: 'moreVersion', query: {uri: this.uri}})
        }
        this.$parent.$parent.spinner = false
    },

    login() {
        window.location = 'https://dhapi.library.sh.cn/management/webapi/cenofmagent/token/locpage?systemId=20&durl=https://jdts.library.sh.cn/index'
    },

    ConfirmError(){
        this.visibleUser = false
    },
    async logout() {
        this.$parent.$parent.spinner = true
        this.visibleLook = false
        sessionStorage.setItem('token', '')
        sessionStorage.setItem('orgName', '')                        
        this.$router.push({name: 'moreVersion', query: {uri: this.uri}})
        location.reload()
    },

    quit() {
        window.opener = null;
        window.open("about:blank", "_self").close()
    },

  },
};
</script>

<style lang="less" scoped>
    .filters{
        margin: 20px 0 0 0;
        a{
            display: inline-block;
            border: 1px solid #126e82;
            height: 30px;
            vertical-align: top;
            box-sizing: border-box;
            line-height: 28px;
            border-radius: 15px;
            padding: 0 15px;
            margin-right: 10px;
            margin-bottom: 10px;
            color: #666;
        }
    }
    .ant-btn-primary {
		background-color: #661112;
		border-color: #661112;
    }
    .hand{
        cursor: pointer;
    }
    .v-info {
        p{
            font-size: 1.1rem;
        }
    }
    .filter-box {
        li {
            font-size: 1.1rem;
        }
        a {
            font-size: 1.1rem;
        }
    }
</style>